<template>
  <view class="page">
    <view class="content">
      <form @submit="addBank" @reset="">
        <view class="uni-form-item">
          <text class="title"><text style="margin-right: 10px">*</text>姓名</text>
          <input
            class="uni-input"
            @input="fullname"
            type="text"
            placeholder="请输入姓名"
          />
        </view>
        <view class="uni-form-item">
          <text class="title"><text style="margin-right: 10px">*</text>身份证号</text>
          <input
            class="uni-input"
            @input="idCard"
            type="idcard"
            placeholder="请输入身份证号"
          />
        </view>
        <view class="uni-form-item">
          <text class="title"><text style="margin-right: 10px">*</text>银行卡号</text>
          <input
            class="uni-input"
            @input="account"
            type="text"
            placeholder="请输入银行卡号"
          />
        </view>
        <view class="uni-form-item" @click="openBank">
          <text class="title"><text style="margin-right: 10px">*</text>所属银行</text>
          <picker
            v-model="bankShow"
            mode="selector"
            :value="current"
            :range="bankList"
            range-key="title"
            @change="changeBank"
          >
            <view style="width: 540rpx; line-height: 70rpx; text-align: right">
              {{ bankList[current].title }}
            </view>
          </picker>
        </view>
        <view class="uni-form-item">
          <text class="title"><text style="margin-right: 10px">*</text>分行名称</text>
          <input
            class="uni-input"
            @input="bank_branch"
            type="text"
            placeholder="请输入分行名称"
          />
        </view>
        <button class="withdraw" form-type="submit" type="submit">绑定</button>
      </form>
    </view>
  </view>
</template>

<script>
import _get from "../../../common/_get";
import _hook from "../../../common/_hook";
export default {
  data() {
    return {
      bankList: [], // 银行列表
      current: 0, // 当前选择的银行
      bankShow: false, // 银行选择弹窗
      requestParams: {
        fullname: "", // 姓名
        id_card: "", // 身份证号
        account: "", // 银行卡号
        bank_type: 3, // 银行类型
        bank_id: "", // 银行id
        bank_branch: "", // 支行名称
      },
    };
  },
  onShow() {
    this.getBank();
    _hook.routeSonHook();
  },
  methods: {
    fullname(e) {
      return (this.requestParams.fullname = e.detail.value.trim());
    },
    idCard(e) {
      return (this.requestParams.id_card = e.detail.value.trim());
    },
    account(e) {
      return (this.requestParams.account = e.detail.value.trim());
    },
    bank_type(e) {
      return (this.requestParams.bank_type = e.detail.value.trim());
    },
    bank_branch(e) {
      return (this.requestParams.bank_branch = e.detail.value.trim());
    },
    // 获取银行列表
    getBank() {
      _get.getBankList({}, (data) => {
        console.log(data);
        this.bankList = data;
      });
    },
    // 选择银行
    changeBank({ detail }) {
      this.current = detail.value;
      this.requestParams.bank_id = this.bankList[detail.value].id;
    },
    // 打开银行
    openBank() {
      this.bankShow = true;
    },
    addBank(e) {
      if (this.requestParams.account == "") {
        return this.showToast("请输入银行卡号!");
      }
      if (this.requestParams.id_card == "") {
        return this.showToast("请输入身份证号!");
      }
      if (this.requestParams.fullname == "") {
        return this.showToast("请输入姓名!");
      }
      if (this.requestParams.bank_branch == "") {
        return this.showToast("请输入分行名称!");
      }
      _get.addUserBank(this.requestParams, (res) => {
        uni.navigateBack();
      });
    },
    showToast(msg) {
      return uni.showToast({ title: msg, icon: "none" });
    },
  },
};
</script>

<style>
page {
  background-color: white;
}
.page {
  border-top: 1px solid #e3e3e3;
}
.uni-input {
  border: none;
  text-align: right;
}
.uni-form-item {
  border-bottom: 1px solid #e3e3e3;
}
.content .withdraw {
  margin-top: 70upx;
  width: 90%;
  background-color: #5693ee;
  color: white;
  height: 70upx;
  line-height: 70upx !important;
  border-radius: 40upx;
  font-size: 36upx;
  cursor: pointer;
}
</style>
